<template>
  <div class="app-container">
    <basic-container v-show="showSearch">
      <common-search @handleQuery="handleQuery" @resetQuery="resetQuery">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" size="mini">
          <el-form-item label="主管海关" prop="mftCustomCode">
            <el-select v-model.trim="queryParams.mftCustomCode" placeholder="请选择主管海关" clearable>
              <el-option v-for="dict in cusSelectList" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="进出口" prop="iEFlag">
            <el-select v-model.trim="queryParams.iEFlag" placeholder="请选择进出口" clearable>
              <el-option v-for="dict in dict.type.chnl_ie_flag" :key="dict.value" :label="dict.label" :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </common-search>
    </basic-container>

    <basic-container>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
            v-hasPermi="['system:transferForward:add']">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
            v-hasPermi="['system:transferForward:edit']">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
            v-hasPermi="['system:transferForward:remove']">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleEnable"
            v-hasPermi="['system:transferForward:enable']">启用</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleDisEnable"
            v-hasPermi="['system:transferForward:disEnable']">禁用</el-button>
        </el-col>
        <!-- <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            :loading="exportLoading"
            @click="handleExport"
            v-hasPermi="['system:transferForward:export']"
          >导出</el-button>
        </el-col>
        -->
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-table v-loading="loading" :data="transferForwardList" @selection-change="handleSelectionChange" stripe border size="small">
        <el-empty slot="empty" :image="require('@/assets/images/empty.png')" :image-size="260"></el-empty>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="主管海关" align="center" prop="mftCustomCode" />
        <el-table-column label="启始地海关" align="center" prop="startCustomsCode" min-width="100"/>
        <el-table-column label="启始地监管场所" align="center" width="300" prop="startAgentCode">
          <template slot-scope="scope">
            {{scope.row.startAgentCode}}-{{scope.row.startAgentName}}
          </template>
        </el-table-column>
        <el-table-column label="目的地海关" align="center" prop="desCustomsCode" min-width="100"/>
        <el-table-column label="目的监管场所" align="center" prop="desAgentCode" width="300">
          <template slot-scope="scope">
            {{scope.row.desAgentCode}}-{{scope.row.desAgentName}}
          </template>
        </el-table-column>
        <el-table-column label="进出口" align="center" prop="iEFlag">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.chnl_ie_flag" :value="scope.row.iEFlag" />
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="center" prop="createBy" />
        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        </el-table-column>
        <el-table-column label="是否默认" align="center" prop="isDefault">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.com_yes_or_no" :value="scope.row.isDefault" />
          </template>
        </el-table-column>
        <el-table-column label="自动生成" align="center" prop="autoGen">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.com_yes_or_no" :value="scope.row.autoGen" />
          </template>
        </el-table-column>
        <el-table-column label="自动申报" align="center" prop="autoDecl">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.com_yes_or_no" :value="scope.row.autoDecl" />
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.commons_enable_status" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="showDetail(scope.row)"
              v-hasPermi="['system:transferForward:query']">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </basic-container>

    <!-- 添加或修改转场参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
        <el-row>
          <el-col :span="12">
            <el-form-item label="主管海关" prop="mftCustomCode">
              <el-select v-model.trim="form.mftCustomCode" placeholder="请选择主管海关" @change="selectCus">
                <el-option v-for="dict in cusSelectList" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="进出口" prop="iEFlag">
              <el-select v-model.trim="form.iEFlag" placeholder="请选择进出口">
                <el-option key="I" label="进口" value="I"></el-option>
                <el-option key="E" label="出口" value="E"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="起始地监管场所" prop="startAgentCode">
              <el-select v-model.trim="form.startAgentCode" placeholder="请选择转场起始场所">
                <el-option v-for="dict in baseInfoFieldSeachList" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目的地监管场所" prop="desAgentCode">
              <el-select v-model.trim="form.desAgentCode" placeholder="请选择转场目的场所">
                <el-option v-for="dict in baseInfoFieldSeachList" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否默认">
              <el-radio-group v-model.trim="form.isDefault">
                <el-radio v-for="dict in dict.type.com_yes_or_no" :key="dict.value" :label="dict.value">{{dict.label}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否自动生成">
              <el-radio-group v-model.trim="form.autoGen">
                <el-radio v-for="dict in dict.type.com_yes_or_no" :key="dict.value" :label="dict.value">{{dict.label}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否自动申报">
              <el-radio-group v-model.trim="form.autoDecl">
                <el-radio v-for="dict in dict.type.com_yes_or_no" :key="dict.value" :label="dict.value">{{dict.label}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
         <el-col :span="12">
           <el-form-item label="业务类型" prop="businessTypeList">
             <el-select v-model.trim="form.businessTypeList" multiple placeholder="请选择业务类型">
               <el-option v-for="dict in dict.type.sys_bill_business_type" :key="dict.value" :label="dict.label"
                 :value="dict.value" />
             </el-select>
           </el-form-item>
         </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 详情dialog-->
    <el-dialog :visible.sync="detailOpen" width="50%" append-to-body :close-on-click-modal="false">
      <el-descriptions class="margin-top" title="转场参数配置详情" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            主管海关
          </template>
          {{form.mftCustomCode}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            启始地海关
          </template>
          {{form.startCustomsCode}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            起始监管场所
          </template>
          {{form.startAgentCode}}- {{form.startAgentName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            目的地海关
          </template>
          {{form.desCustomsCode}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            目的地监管场所
          </template>
          {{form.desAgentCode}}- {{form.desAgentName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            进出口
          </template>
          <dict-tag :options="dict.type.chnl_ie_flag" :value="form.iEFlag" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            是否默认
          </template>
          <dict-tag :options="dict.type.com_yes_or_no" :value="form.isDefault" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            自动生成
          </template>
          <dict-tag :options="dict.type.com_yes_or_no" :value="form.autoGen" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            状态
          </template>
          <dict-tag :options="dict.type.commons_enable_status" :value="form.status" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            创建人
          </template>
          {{form.createBy}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            创建时间
          </template>
          {{form.createTime}}
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button @click="closeDetail">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listTransferForward,
    getTransferForward,
    delTransferForward,
    addTransferForward,
    updateTransferForward,
    exportTransferForward,
    enableTransferForward,
    disEnableTransferForward
  } from "@/api/system/transferForward";
  import {
    selectList
  } from "@/api/system/customs";
  import {
    selectFieldDictList
  } from "@/api/system/baseFieldInfo";

  export default {
    name: "TransferForward",
    dicts: ['chnl_ie_flag', 'com_yes_or_no','commons_enable_status','sys_bill_business_type'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        queryCustomsCode: "",
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        //详情显示的时候，表单编辑禁用
        isViewDisabled: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 转场参数配置表格数据
        transferForwardList: [],
        baseInfoFieldSeachList: [],
        cusSelectList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //显示详情
        detailOpen: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          mftCustomCode: null,
          iEFlag: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          mftCustomCode: [{
            required: true,
            message: "舱单海关编码不能为空",
            trigger: "change"
          }],
          startAgentCode: [{
            required: true,
            message: "转场起始场所不能为空",
            trigger: "change"
          }],
          desAgentCode: [{
            required: true,
            message: "转场目的场所不能为空",
            trigger: "change"
          }],
          iEFlag: [{
            required: true,
            message: "进出口标志不能为空",
            trigger: "change"
          }],
          isDefault: [{
            required: true,
            message: "是否默认不能为空",
            trigger: "change"
          }],
          autoGen: [{
            required: true,
            message: "字段生成不能为空",
            trigger: "change"
          }],
          businessTypeList: [{
            required: true,
            message: "业务类型不能为空",
            trigger: "change"
          }]
        }
      };
    },
    created() {
      this.getList();
      this.initCusSelect();
      this.initBaseInfoFieldList();
    },
    methods: {
      /** 查询转场参数配置列表 */
      getList() {
        this.loading = true;
        listTransferForward(this.queryParams).then(response => {
          this.transferForwardList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      initCusSelect() {
        selectList().then(response => {
          this.cusSelectList = response;
        });
      },
      initBaseInfoFieldList() {
        selectFieldDictList(this.queryCustomsCode).then(response => {
          this.baseInfoFieldSeachList = response;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          mftCustomCode: null,
          startCustomsCode: null,
          startAgentCode: null,
          startAgentName: null,
          desCustomsCode: null,
          desAgentCode: null,
          desAgentName: null,
          iEFlag: null,
          createBy: null,
          createTime: null,
          isDefault:'0',
          autoGen:'0',
          status:'1',
          autoDecl:'0',
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.isViewDisabled = false;
        this.open = true;
        this.title = "添加转场参数配置";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        this.load(id);
        this.title = "修改转场参数配置";
        this.open = true;
      },
      //关闭详情
      closeDetail() {
        this.detailOpen = false;
      },
      //显示详情
      showDetail(row, column, event) {
        this.reset();
        //关闭表单编辑模式
        this.isViewDisabled = true;
        const id = row.id;
        this.load(id);
        //打开详情
        this.detailOpen = true;
      },
      /** 加载数据 */
      load(id) {
        getTransferForward(id).then(response => {
          this.form = response.data;
           this.form.businessTypeList= this.form.businessTypes.split(",");
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.businessTypes= this.form.businessTypeList.join(",");
            if (this.form.id != null) {
              updateTransferForward(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addTransferForward(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除转场参数配置编号为"' + ids + '"的数据项？').then(function() {
          return delTransferForward(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      handleEnable() {
        const ids = this.ids[0];
        this.$modal.confirm('是否确认启用编号为"' + ids + '"的数据项？').then(function() {
          return enableTransferForward(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("启用成功");
        }).catch(() => {});
      },
      handleDisEnable() {
        const ids =  this.ids[0];
        this.$modal.confirm('是否确认禁用编号为"' + ids + '"的数据项？').then(function() {
          return disEnableTransferForward(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("禁用成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$modal.confirm('是否确认导出所有转场参数配置数据项？').then(() => {
          this.exportLoading = true;
          return exportTransferForward(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
      },
      selectCus(selCus){
        this.queryCustomsCode=selCus;
         this.initBaseInfoFieldList();
      }
    }
  };
</script>



<style type="text/css">
  .el-form-item .el-select {
    width: 100%;
  }
</style>
